import { useState, useRef } from 'react';

const Anli = () => {


    const [uservalue, setuservalue] = useState("")
    const [msgvalue, setmsgvalue] = useState("")
    const [data, setdata] = useState([])
    //控制显示隐藏变量
    const [isshow, setisshow] = useState(true)
    //控制显示隐藏方法
    const fn1 = () => {
        setisshow(!isshow)
    }
    //删除方法
    const fn2 = (index) => {
        const newdata = data.filter((item, itemIndex) => itemIndex !== index);
        setdata(newdata);
    }
    //定义查询数据

    const [svalue, setsvalue] = useState('')
    const [slist, setslist] = useState([])
    //定义修改部分


    const userref = useRef()
    const msgref = useRef()
    const fn = () => {
        const newuservalue = userref.current.value
        const newmsgvalue = msgref.current.value
        // 获取提交留言时间
        const ttime = new Date().toLocaleString()
        const newdata = [...data, { user: newuservalue, msg: newmsgvalue, time: ttime }]
        setdata(newdata)
        console.log("昵称：", newuservalue);
        console.log("留言：", newmsgvalue);
        setmsgvalue("")
        setuservalue("")
    }
    // 定义查询方法
    const s = () => {
        console.log("查询方法");
        let res = data.filter(item => {
            return item.msg.includes(svalue) || item.user.includes(svalue)
        })
        if (res.length <= 0) {
             alert('未查到相关内容')
             setTimeout(() => {
                setsvalue("")
             }, 0);
        }
        setslist(res)
        setsvalue("")

    }
    return (
        <div>
            <h1>添加</h1>
            昵称:<input type="text" ref={userref} value={uservalue} onChange={e => setuservalue(e.target.value)} /><br />
            内容: <textarea ref={msgref} value={msgvalue} onChange={e => setmsgvalue(e.target.value)}></textarea>
            <br />
            <button onClick={() => { fn() }} >提交留言</button><br />
            <hr />

            <button onClick={fn1}>查看留言</button>
            {isshow && (
                <div>
                    <h3>查看留言历史</h3>
                    {data.length === 0 ? (
                        <p style={{ fontSize: "50px", color: "red" }}>暂无留言</p>
                    ) : (
                        data.map((item, index) => (
                            <div key={index}>
                                <p style={{ color: "#999" }}>昵称：{item.user}</p>
                                <p style={{ color: "#999" }}>内容：{item.msg}</p>
                                <h6>提交时间: {item.time}</h6>
                                <button style={{ color: "blue" }}>修改</button>
                                <button style={{ color: "red" }} onClick={() => { fn2(index) }}>删除</button>
                                <hr />
                            </div>
                        ))
                    )}
                </div>
            )}

            {/* 查询的界面 */}
            <div>
                <h2>查询留言</h2>
                <input type="text" value={svalue} onChange={e => { setsvalue(e.target.value) }} />
                <button style={{ marginTop: "10px" }} onClick={() => { s() }}>查询留言</button>
                <ul>
                    {
                        slist.length <= 0 && <li>未找到相关数据</li>
                    }
                    {
                        slist.map((item, index) => {
                            return (

                                <div key={index}>
                                    <p style={{ color: "#999" }}>昵称：{item.user}</p>
                                    <p style={{ color: "#999" }}>内容：{item.msg}</p>
                                    <h6>提交时间: {item.time}</h6>
                                </div>

                            )

                        })
                    }
                </ul>
            </div>


        </div>
    )
}



export default Anli;